<script setup lang="tsx">
import { ref, onMounted, watch,computed } from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getDevPieChartAPI } from '@/api/asset/index'

// 选择条件
const props = defineProps({
  select: {
    type: Object,
    required: true,
    default: () => {}
  },
  province:{
    type:String,
    default:''
  }
})
const chartRef = ref()
const all = computed(() => {
  return false
  // return!(props.select.creatBeginTime || props.select.createEndTime || props.select.topic || props.province);
});
const init = () => {
  chartRef.value.loadingChart(true)
  chartRef.value.initChart()
  getInfo(false)
}
// 静态数据
const options = {
  // 鼠标悬停显示详细信息
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  // 全局颜色定义
  color: [
    '#576fc3',
    '#26a1e5',
    '#e77cc9',
    '#995fb1',
    '#f88658',
    '#43a275',
    '#78bfdc',
    '#ea6868',
    '#f8c963',
    '#93cc7b'
  ],
  series: [
    {
      name: '设备类型',
      type: 'pie', //图表类型:饼图
      radius: '55%', //图表大小
      center: ['40%', '50%'], //中心位置
      data: [],
      // 视图效果
      itemStyle: {
        // 普通模式显示
        normal: {
          // 标签
          label: {
            show: true,
            // position:'inside',
            formatter: '{b} : {c} ({d}%)'
          },
          // 标签连线
          labelLine: { show: true }
        },
        // 鼠标悬停效果
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

// 参数合并
const _parameter = () => {
  console.log(all.value);
  return { ...props.select,province:props.province,all:all.value }
}
const getInfo = (flag: boolean) => {
  getDevPieChartAPI(_parameter()).then((res) => {
    let { data, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      options.series[0].data = data
      // flag?更新|初始化
      flag ? chartRef.value.updateChart() : chartRef.value.initChart()
    }
  })
}
// 侦听顶部选择变化
watch(props, () => {
  getInfo(true)
})
onMounted(() => {
  init()
})
</script>
<template>
  <div class="chart-content">
    <jmp-chart ref="chartRef" v-model:option="options"></jmp-chart>
  </div>
</template>
<style lang="scss" scoped></style>
